<template>
  <div class="history_hot">
    <div class="history" v-if="ifShowHistory">
      <div class="title">
        <h3>历史记录</h3>
        <van-icon name="delete" size="24" @click="delHistory" />
      </div>
      <div class="content">
        <van-tag plain type="default" v-for="(item, index) in historyKeywordList" :key="index" @click="tagClick(item)">{{item}}</van-tag>
      </div>
    </div>
    <div class="hot">
      <div class="title">
        <h3>热门搜索</h3>
      </div>
      <div class="content">
        <van-tag plain :type="item.is_hot==1 ? 'danger' : 'default'" v-for="(item, index) in hotKeywordList" :key="index" @click="tagClick(item.keyword)">{{item.keyword}}</van-tag>
      </div>
    </div>
  </div>
</template>
 
<script>
import { GetHistoryHotApi, DelHistoryAPI } from "@/request/api";
export default {
  data() {
    return {
      // 历史数组
      historyKeywordList: [],
      // 热门数组
      hotKeywordList: [],
      // 是否显示history区块
      ifShowHistory: true
    };
  },
  created() {
    // 请求数据（历史数组、热门数组、搜索框的placeHolder）
    GetHistoryHotApi().then((res) => {
      console.log(res);
      if (res.errno == 0) {
        let { defaultKeyword, historyKeywordList, hotKeywordList } = res.data;
        this.historyKeywordList = historyKeywordList;
        this.hotKeywordList = hotKeywordList;
        // 修改Index.vue中的placeholder
        this.$emit('changePlaceholder', defaultKeyword.keyword);
      }
    });
  },
  methods: {
    // 清除历史记录
      delHistory(){
        DelHistoryAPI().then(res=>{
            if(res.errno == 0){
                // Toast.success('删除成功');
                this.$toast.success('删除成功');
                setTimeout(()=>{
                    this.ifShowHistory = false;
                }, 1000)
            }
        })
      },
      // 标签点击事件
      tagClick(arg){
        this.$emit('goSearch', arg);
      }
  }
};
</script>
 
<style lang = "less" scoped>
.history_hot {
  .title {
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;
    h3 {
      font-size: 20px;
    }
  }
  .van-tag {
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .history,
  .hot {
    padding: 0 10px;
    background: #fff;
    margin-bottom: 20px;
  }
}
</style>